import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";

@Component({
    selector:"df-selection-bar",
    template:`
        <div class="df-flex" [style.height]="barHeight" style="align-items: stretch">
            <div style="flex-grow:1">
              <input [(ngModel)]="keyword" [placeholder]="tip" (blur)="kwChanged()">
            </div>
            <div *ngIf="keyword"><span class="_remove" (click)="removeKey()">x</span></div>
            <div class="df-btn-sel" (click)="selecting=!selecting"></div>
        </div>
        <div [style.display]="selecting?'block':'none'" style="max-height:50vh;overflow:auto">
            <ng-content></ng-content>
            <div class="df-toolbar">
              <button class="df-btn df-btn-reset"  (click)="selected(2)">重置筛选条件</button>
              <button class="df-btn df-btn-cancel"  (click)="selected(1)">取消</button>
              <button class="df-btn df-btn-confirm" (click)="selected(0)">确定</button>
            </div>
        </div>
        
    `,
    styles:[`
      input{
        outline:none;
        border:none;
        display:block;
        width:100%;
        height:100%;
      }
      ._remove{
        font-weight:bolder;
        color:darkred;
        padding:2px;
        border-radius:50%;
        border:1px solid lightgray;
        margin-right:10px;
      }
    `]
})
export class SelectionBarComponent{
    @Input() barHeight;//要求带单位
    @Input() tip="输入关键字进行检索";
    @Input() updateRightNow=false;//关键字变化时是否立即触发筛选
    @Output() done:EventEmitter<string>=new EventEmitter<string>();
    @Output() cancel:EventEmitter<void>=new EventEmitter<void>();
    @Output() reset:EventEmitter<void>=new EventEmitter<void>();

    selecting=false;
    private _keyword;
    get keyword(){
        return this._keyword;
    }
    set keyword(_kw){
        if(this._keyword==_kw) return;
        this._keyword=_kw;
        if(this.updateRightNow) this.done.emit(this.keyword);
    }
    selected(flag){
        switch (flag){
            case 0:
                this.done.emit(this.keyword);
                break;
            case 1:
                this.cancel.emit();
                break;
            case 2:
                this.reset.emit();
                break;
        }
        this.selecting=false;
    }
    removeKey(){
        this.keyword=null;
        this.done.emit(null);
    }
    kwChanged(){
        if(!this.updateRightNow) this.done.emit(this.keyword);
    }
}
